<template>
  <div class="logincom">
    <div class="zhong">
        <!-- submit.prevent:阻止提交事件的刷新页面这种默认行为 -->
        
            <h2>注册页</h2>
            <form>
            <p>
                <input type="text" placeholder="姓名" required>
            </p>
            <p>
                <input type="tel" placeholder="号码" required>
            </p>
            <p>
                <input type="emali" placeholder="邮箱" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
            </p>
            <p>
                <input type="password" placeholder="注册密码" required>
            </p>

            <button @click="zhuc()">注册</button>
        </form>
    </div>
  </div>
</template>

<script>

export default {
    name : 'RegisterCom',
    //所有控件必须必填，两次密码必读一致
}
</script>

<style scoped>
.logincom{
    width: 100%;
    height: 98vh;
    /*溢出隐藏**/
    overflow: hidden;
    /* background: orange; */
}
.zhong{
    /* background-color: rgb(231, 23, 127); */
    margin-top: 20%;
    display: flex;
    flex-direction: column;
    margin-left: 28%;
    align-items: center;
    border: solid 0.2rem;
    width: 40%;
}
.zhong h2{
    margin-top: 20px;
}
.zhong aside{
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
.zhong input{
    padding: 0;
    border: none;
    border-bottom: solid 0.1rem;
    outline: none;
}
.zhong .a2{
    margin-top: 20px;
    width: 30%;
    height: 30px;
    background: green;
    border: none;
    border-radius: 6px;
    margin-bottom: 20px;
}
.zhong .a1{
    margin-right: 8.8rem;
}
</style>
